<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			img{
				vertical-align:top;
			}
			.max{
				text-align: center;
				/*border: 1px solid black;*/
				position: relative;
				width: 326px;
				margin: 100px;
			}
			
			.box{
				width: 326px;
				/*border: 1px solid black;*/
				
				
				position: relative;
				overflow: hidden;
			}
			
			.modal{
				width: 326px;
				height: 298px;
				background: rgba(0,0,0,0.5);
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				transition: 1s;
			}
			
			.box>img{
				transition: 1s;
			}
			
			.box:hover{
				cursor: pointer;
			}
			
			.box:hover>img{
				transform: scale(1.5);
			}
			
			.box:hover .modal{
				opacity: 1;
			}
			
			.txt{
				transition: 1s;
				position: absolute;
				bottom: -50px;
				width: 100%;
				background: black;
				color: white;
				left: 0px;
				opacity: 0;
				transition: 1s;
			}
			
			.max:hover .txt{
				opacity: 1;
				transform: translateY(-50px);
			}
			
			.modal>img{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -32.5px;
				margin-left: -31.5px;
			}
			
			.txt2{
				transition: 1s;
				position: absolute;
				width: 100%;
				background: black;
				color: white;
				left: -326px;
				bottom: 0;
				opacity: 0;
				transition: 1s;
			}
			
			.max:hover .txt2{
				opacity: 1;
				transform: translateX(326px);
			}
			
			.modal2{
				width: 326px;
				height: 298px;
				background: rgba(0,0,0,0.5);
				position: absolute;
				top: 0;
				left: 0;
				/*opacity: 0;*/
				transition: 1s;
				transform-origin: left;
				transform-style: preserve-3d;
			}
			
			.modal2>img{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -32.5px;
				margin-left: -31.5px;
			}
			
			.box:hover .modal2{
				opacity: 1;
				transform: rotateY(-90deg);
			}
		</style>
	</head>
	<body>
		<div style="display: inline-block;" class="max">
			<div class="box">
				<img src="../images/咖啡1.png"/>
				<div class="modal">
					<img src="../images/search.png"/>
				</div>
				
			</div>
			<div class="txt">
				<h2>摩卡咖啡</h2>
				<p>摩卡咖啡真的超级好喝！</p>
			</div>
		</div>
		
		<div style="margin: auto;perspective: 1200px;display: inline-block;margin-left: 200px;" class="max">
			<div class="box">
				<img src="../images/咖啡1.png"/>
				<div class="modal2">
					<img src="../images/search.png"/>
				</div>
				
			</div>
			<div class="txt2">
				<h2>摩卡咖啡</h2>
				<p>摩卡咖啡真的超级好喝！</p>
			</div>
		</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>
